<template>
	<!--    坐庄分润结算审核记录-->
	<div>
		<main-content
			v-if="!showDetail"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form ref="form" :inline="true" :model="queryData">
					<el-form-item label="结算时间:" prop="time">
						<el-date-picker
							v-model="queryData.time"
							:default-time="defaultTime"
							:disabled="loading"
							:picker-options="pickerOptions"
							align="right"
							:end-placeholder="$t('common.end_date')"
							format="yyyy-MM-dd HH:mm:ss"
							range-separator="-"
							size="medium"
							:start-placeholder="$t('common.start_date')"
							type="datetimerange"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.order_no')}:`"
						prop="orderNo"
					>
						<el-input
							v-model="queryData.orderNo"
							:disabled="loading"
							clearable
							:placeholder="$t('common.please_enter')"
							size="medium"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<el-form-item label="总代账号:" prop="proxyName">
						<el-input
							v-model="queryData.proxyName"
							:disabled="loading"
							clearable
							:placeholder="$t('common.please_enter')"
							size="medium"
							@keyup.enter.native="enterSearch"
						></el-input>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.fund_audit.order_status')}:`"
						prop="orderStatus"
					>
						<el-select
							v-model="queryData.orderStatus"
							:disabled="loading"
							:popper-append-to-body="false"
							clearable
							:placeholder="$t('common.select_all')"
						>
							<el-option
								:value="undefined"
								:label="$t('common.all')"
							></el-option>
							<el-option
								v-for="item in orderTypeArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="结算状态:" prop="countStatus">
						<el-select
							v-model="queryData.countStatus"
							:disabled="loading"
							:popper-append-to-body="false"
							clearable
							:placeholder="$t('common.select_all')"
						>
							<el-option
								:value="undefined"
								:label="$t('common.all')"
							></el-option>
							<el-option
								v-for="item in countStatusArr"
								:key="item.code"
								:label="item.description"
								:value="item.code"
							></el-option>
						</el-select>
					</el-form-item>
					<el-form-item style="margin-left: 8px">
						<el-button
							:disabled="loading"
							icon="el-icon-search"
							size="medium"
							type="primary"
							@click="search"
						>
							查询
						</el-button>
						<el-button
							:disabled="loading"
							icon="el-icon-refresh-left"
							size="medium"
							@click="reset"
						>
							重置
						</el-button>
					</el-form-item>
					<el-form-item
						:label="`${$t('funds.fund_audit.order_status')}:`"
					></el-form-item>
				</el-form>
			</template>
			<template slot="content">
				<el-table
					v-loading="loading"
					:data="dataList"
					:header-cell-style="getRowClass"
					border
					class="small-size-table"
					element-loading-spinner="el-icon-loading"
					size="mini"
					style="width: 100%"
					:max-height="tableHeight"
				>
					<el-table-column
						align="center"
						:label="$t('funds.order_no')"
						prop="orderNo"
						width="220"
					>
						<template slot-scope="scope">
							{{ scope.row.orderNo || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('funds.fund_audit.top_proxy_name')"
						prop="proxyName"
						width="130"
					>
						<template slot-scope="scope">
							{{ scope.row.proxyName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('funds.fund_audit.order_status')"
						prop="orderStatus"
					>
						<template slot-scope="scope">
							{{
								scope.row.orderStatus === 0
									? '审核通过'
									: typeFilter(
											scope.row.orderStatus,
											'commissionReviewRecordStatus'
									  )
							}}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						label="结算时间"
						prop="settlementTime"
						width="220"
					>
						<template slot-scope="scope">
							{{ scope.row.settlementTime || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						prop="orderAmount"
						width="220"
					>
						<template slot="header">
							<div>预结算冲正后净盈亏</div>
							<div>预结算平台利润</div>
						</template>
						<template slot-scope="scope">
							<div>
								{{
									decimalToFixed2(
										scope.row.budgetAdjustRushAmount
									) || '-'
								}}
							</div>
							<div>
								{{
									decimalToFixed2(scope.row.budgetPlatFee) ||
										'-'
								}}
							</div>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						prop="orderRateAmount"
						width="220"
					>
						<template slot="header">
							<div>最终结算冲正后净盈亏</div>
							<div>最终结算平台利润</div>
						</template>
						<template slot-scope="scope">
							<div>
								{{
									scope.row.countStatus === 1
										? decimalToFixed2(
												scope.row.adjustRushAmount
										  )
										: '-'
								}}
							</div>
							<div>
								{{
									scope.row.countStatus === 1
										? decimalToFixed2(scope.row.platFee)
										: '-'
								}}
							</div>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						label="结算类型"
						prop="holderFeeCountStatus"
						width="180"
					>
						<template slot-scope="scope">
							{{
								typeFilter(
									scope.row.countStatus,
									'holderFeeCountStatus'
								) || '-'
							}}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('funds.fund_audit.lock_account')"
						prop="details"
						width="180"
					>
						<template slot-scope="scope">
							<div>
								<p>
									一审：{{
										(scope.row.countStatus === 1
											? scope.row.audit1Operator
											: '-') || '-'
									}}
								</p>
								<p>
									二审：{{
										(scope.row.countStatus === 1
											? scope.row.audit2Operator
											: '-') || '-'
									}}
								</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('funds.fund_audit.audit_time')"
						prop="auditTime"
						width="220"
					>
						<template slot-scope="scope">
							<div>
								<p>
									一审：{{
										(scope.row.countStatus === 1
											? scope.row.audit1Time
											: '-') || '-'
									}}
								</p>
								<p>
									二审：{{
										(scope.row.orderStatus !== 1 &&
										scope.row.countStatus === 1
											? scope.row.audit2Time
											: '-') || '-'
									}}
								</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('funds.fund_audit.audit_cost')"
						prop="costTime"
						width="220"
					>
						<template slot-scope="scope">
							<div>
								<p>
									一审：{{
										(scope.row.countStatus === 1
											? formatSeconds(
													scope.row.audit1Cost
											  )
											: '-') || '-'
									}}
								</p>
								<p>
									二审：{{
										(scope.row.orderStatus !== 1 &&
										scope.row.countStatus === 1
											? formatSeconds(
													scope.row.audit2Cost
											  )
											: '-') || '-'
									}}
								</p>
							</div>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('common.remark')"
						prop="audit2Desc"
						width="230"
					>
						<template slot-scope="scope">
							<div v-if="scope.row.countStatus === 1">
								<p>
									{{
										$t('funds.fund_audit.audit_time_1')
									}}：{{ scope.row.audit1Desc || '-' }}
								</p>
								<p>
									{{
										$t('funds.fund_audit.audit_remark_2')
									}}：{{ scope.row.audit2Desc || '-' }}
								</p>
							</div>
							<p v-else>自动审核通过</p>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('common.actions')"
						prop="auditStep"
						min-width="150"
					>
						<template slot-scope="scope">
							<el-button
								size="medium"
								type="primary"
								@click="goDetail(scope.row)"
							>
								查看
							</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					:current-page.sync="pageNum"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					background
					class="pageValue"
					layout="total, sizes,prev, pager, next, jumper"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</template>
		</main-content>
		<detail
			v-else
			:rowData="rowData"
			:type="type"
			@goBack="goBack"
		></detail>
	</div>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { getUsername } from '@/utils/auth'
import { routerNames } from '@/utils/consts'
import { formatSeconds } from '@/utils'
import MainContent from '@/components/MainContent/index.vue'

const end = dayjs()
	.endOf('day')
	.valueOf()
const start = dayjs()
	.startOf('month')
	.valueOf()

export default {
	name: routerNames.memberWithdrawalReviewRecord,
	components: { detail: () => import('./components/detail'), MainContent },
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {
				time: [start, end],
				orderNo: undefined,
				proxyName: undefined,
				orderStatus: undefined,
				countStatus: undefined
			},
			type: true,
			showDetail: false,
			rowData: {},
			name: '',
			dataList: []
		}
	},
	computed: {
		countStatusArr() {
			return this.globalDics.holderFeeCountStatus || []
		},
		orderTypeArr() {
			return this.globalDics.commissionReviewRecordStatus || []
		}
	},
	mounted() {
		this.name = getUsername()
	},
	methods: {
		formatSeconds,
		loadData() {
			this.loading = true
			const [settmentStartTime, settmentEndTime] =
				this.queryData.time || []
			let params = {
				...this.queryData,
				settmentStartTime: settmentStartTime
					? dayjs(settmentStartTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				settmentEndTime: settmentEndTime
					? dayjs(settmentEndTime).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			params = {
				...this.getParams(params)
			}
			delete params.time
			this.$api
				.proxyHolderFeeAduitRecordQueryRecordPage(params)
				.then((res) => {
					this.loading = false
					if (res?.code === 200) {
						const { record, totalRecord } = res.data || {}
						this.dataList = Array.isArray(record)
							? Object.freeze(record)
							: []
						this.total = totalRecord || 0
					} else {
						this.$message({
							message: res?.msg || '接口请求异常',
							type: 'error'
						})
					}
				})
				.catch(() => {
					this.loading = false
				})
		},
		// 进入详情
		goDetail(row) {
			this.type =
				Number(row.auditStep) === 1 && row.auditName === this.name
			this.rowData = row
			this.showDetail = true
		},
		goBack() {
			this.showDetail = false
			this.loadData()
		},
		reset() {
			this.$refs.form.resetFields()
			this.loadData()
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}

::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
}

.look {
	//background-color: #00BFBF;
	//border-color: #00BFBF;
	color: #00bfbf;
}
</style>
